<template>
	<el-main>
		<el-row>
			<el-button type="primary" size="medium" icon="el-icon-edit" @click="toCreate">
				新增群组
			</el-button>
		</el-row>
		<el-table :data="tableData" border style="margin-top: 10px;">
			<el-table-column
				prop="groupName"
				label="群组名称">
			</el-table-column>
			<el-table-column
				prop="groupUseNum"
				label="使用数量">
				<template slot-scope="scope">
					{{scope.row.groupUseNum}}人
				</template>
			</el-table-column>
			<el-table-column
				prop="createTime"
				label="创建时间">
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template slot-scope="scope">
					<span v-if="scope.row.status==1" style="color:green;">
						启用
					</span>
					<span v-if="scope.row.status==2" style="color:red;">
						停用
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="290">
				<template slot-scope="scope">
					<el-button type="primary" size="small" 
						@click="getDetail(scope.row.groupId)">
						查看详情
					</el-button>
					<el-button type="warning" size="small" 
						@click="toAssign(scope.row.groupId,scope.row.groupName)">
						分配用户
					</el-button>
					<el-button type="danger" size="small" 
						@click="deleteGroup(scope.row.groupId,scope.$index)">
						删除群组
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="page-block" v-if="params.totalCount > 0">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:page-size="params.pageSize"
				:current-page.sync="params.currentPage"
				layout="total, prev, pager, next, jumper"
				:total="params.totalCount">
			</el-pagination>
		</div>
	</el-main>
</template>

<script>
	import { getGroupList,deleteGroup } from '@/api/group.js'
	export default {
		data() {
			return {
				tableData: [],
				params: {
					// 当前页
					currentPage: 1,
					// 每页多少条
					pageSize: 10,
					// 统计总数
					totalCount: 0
				}
			}
		},
		mounted() {
			this.getGroupList();
		},
		methods: {
			// 获取列表
			getGroupList() {
				let _this = this;
				getGroupList(_this.params).then(function(res){
					if (res.code === 200) {
						_this.tableData = res.data.records;
						_this.params.totalCount = res.data.total;
					} else {
						_this.$message.error(res.msg);
					}
				})
			},
			// 每页多少条
			handleSizeChange(val) {
				this.params.pageSize = val;
				this.getGroupList();
			},
			// 当前页
			handleCurrentChange(val) {
				this.params.currentPage = val;
				this.getGroupList();
			},
			// 查看详情
			getDetail(groupId) {
				this.$router.push({
					path: './detail',
					query: {'groupId': groupId}
				});
			},
			// 新增
			toCreate() {
				this.$router.push('./detail');
			},
			// 分配用户
			toAssign(groupId,groupName) {
				this.$router.push({
					path: '../group/assign',
					query: {'groupId': groupId, 'groupName': groupName}
				});
			},
			// 删除群组
			deleteGroup(groupId,index) {
				this.$confirm('此操作将永久删除该群组，是否继续？', 
				'提示', {type: 'warning'}).then(() => {
					let _this = this;
					deleteGroup({'groupId': groupId}).then(function(res){
						if (res.code === 200) {
							_this.tableData.splice(index, 1);
							_this.$message({
								message: res.msg,
								type: 'success'
							});
						} else {
							_this.$message.error(res.msg);
						}
					})
				}).catch(() => {});
			}
		}
	}
</script>